
import { Component } from "react";
import type { ReactNode } from 'react'
interface iState {
    flag: boolean
}
export default class App extends Component {
    // 条件渲染的方法有多种，主要记住 三目运算即可


    // 在类中
    state: iState = {
        flag: true
    }

    render() {
        // 在函数中
        let com = null

        // 1. 条件判断方法 1
        if (this.state.flag) {
            com = <h1>为真</h1>
        }
        else {
            com = <h1>为假</h1>
        }

        return <>
            <div>
                <h1>父组件</h1>
                {com}
                {/* 2. 条件渲染方法 2 */}
                <h1>{this.state.flag ? '为真' : '为假'}</h1>

                {/* 3. 前面条件为真就显示后面的内容 */}
                {this.state.flag && (<h1>为真</h1>)}

                {/* 4. 前面条件为假显示后面的内容 */}
                {this.state.flag || (<h1>为假</h1>)}

                <button onClick={() => {
                    this.setState({
                        flag: !this.state.flag
                    })
                }}>切换显示</button>
            </div>
        </>
    }

}